<template>
    <view class="page-rank">
        <view class="filter-bar">
            <filter-bar type="bndy" is-sticky @sort-change="onSortChange" />
        </view>

        <view class="container">
            <goods-item
                v-for="(item, index) in List"
                :key="index"
                type="bdny"
                :item="item"
                :index="index"
            ></goods-item>

            <cl-loadmore
                background-color="#f7f7f7"
                :divider="false"
                :loading="Loading"
                :finish="Finished"
                v-if="Loadmore"
            ></cl-loadmore>

            <view class="empty" v-if="EmptyStatus">
                <image src="@/static/images/empty-goods.png" />
                <text>暂无商品</text>
            </view>
        </view>

        <back-top></back-top>

        <!-- 红包 -->
        <view class="popup-red-package">
            <popup-red-package ref="popup-red-package"></popup-red-package>
        </view>

        <!-- 分享 -->
        <share-popup ref="share-popup"></share-popup>
    </view>
</template>

<script>
import FilterBar from './components/filter-bar';
import GoodsItem from './components/goods-item';
import Pager from '@/mixins/pager';
import Share from '@/mixins/share';
import BackTop from './components/back-top';
import PopupRedPackage from './components/red-package';
import SharePopup from './components/share';

import RedPackage from '@/mixins/red-package';
import { mapGetters } from 'vuex';

export default {
    components: {
        FilterBar,
        GoodsItem,
        BackTop,
        PopupRedPackage,
        SharePopup
    },

    mixins: [Pager, Share, RedPackage],

    onLoad() {
        this.refresh();
        uni.reportAnalytics('enter_list');
    },

    computed: {
        ...mapGetters(['conf', 'userInfo'])
    },

    methods: {
        refresh(params) {
            let { data, next } = this._refresh(params);
            data.isTopList = 1;
            next(this.$service.wxjlj.page(data));
        },

        onSortChange({ prop, order }) {
            if (prop == 'defNum') {
                uni.reportAnalytics('click_bd_xl');
            } else if (prop == 'endPrice') {
                uni.reportAnalytics('click_bd_jg');
            } else if (prop == '') {
                uni.reportAnalytics('click_bd_zh');
            }

            this.refresh({
                order: prop,
                sort: order,
                page: 1
            });
        }
    }
};
</script>

<style lang="scss">
page {
    background-color: #f7f7f7;
}
</style>

<style lang="scss" scoped>
.popup-red-package {
    /deep/.cl-popup {
        background-color: transparent;
        overflow: visible;

        &__container {
            padding: 0;
        }
    }

    /deep/.cl-countdown__number {
        background-color: transparent !important;
        margin: 0 !important;
        padding: 0;
        font-size: 22rpx;
        border-radius: 10rpx;
    }
}

.page-rank {
    .filter-bar {
        position: sticky;
        top: 0;
        z-index: 99;
    }

    .container {
        padding: 20rpx 0;
        position: relative;

        .empty {
            position: absolute;
            left: calc(50% - 205rpx);
            top: 300rpx;

            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            image {
                height: 302rpx;
                width: 410rpx;
            }

            text {
                font-size: 26rpx;
                color: #999;
            }
        }
    }
}
</style>
